<template>
	<view class="jifen">
		<view class="jifenShow">
			<text class="number">941</text>
			<text class="singUp"><image src="../../../static/icons/jifen1.png" mode=""/>积分补登</text>
		</view>
		<view class="jifenContent">
			<view class="testHeader">
				<view :class="navIndex===1?'activite':''" @click="checkIndex(1)">
					积分明细
				</view>
				<view :class="navIndex===2?'activite':''" @click="checkIndex(2)">
					收入积分
				</view>
				<view :class="navIndex===3?'activite':''" @click="checkIndex(3)">
					积分使用
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<view class="jifenlist">
					<view class="jifenuse">
						<text>做题积分</text>
						<text class="time">2022.04.19</text>
					</view>
					<view class="jifenin">
						<text class="Number">+10</text>
					</view>
				</view>
				<view class="jifenlist">
					<view class="jifenuse">
						<text>学习时长</text>
						<text class="time">2022.04.19</text>
					</view>
					<view class="jifenin">
						<text class="Number">+10</text>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="jifenlist">
					<view class="jifenuse">
						<text>做题积分</text>
						<text class="time">2022.04.19</text>
					</view>
					<view class="jifenin">
						<text class="Number">+10</text>
					</view>
				</view>
				<view class="jifenlist">
					<view class="jifenuse">
						<text>连续学习</text>
						<text class="time">2022.04.19</text>
					</view>
					<view class="jifenin">
						<text class="Number">+20</text>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==3">
				<view class="jifenlist">
					<view class="jifenuse">
						<text>书籍兑换</text>
						<text class="time">2022.04.19</text>
					</view>
					
				</view>
				<view class="jifenlist">
					<view class="jifenuse">
						<text>真题兑换</text>
						<text class="time">2022.04.19</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			navIndex:1,
			date:"2022.04.19"
			}
		},
		methods: {
			checkIndex(index){
				this.navIndex=index
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		font-family: "微软雅黑";
	}
	
.jifen{
	padding-top: 30px;
	background:#33a0ff;
	box-shadow: inset 0 -800rpx 20rpx  0 #fff;
	padding-left: 10px;
	padding-right: 10px;
	.jifenShow{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #4b90ff;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		position: relative;
		letter-spacing: 1px;
		box-shadow: 0 10px 30px 0 inset #89beff; 
		margin-bottom: 20px;
		text{
			display: block;
		}
		.number{
			line-height: 100px;
			font-size: 30px;
			color: #fff;
		}
		.singUp{
			position: absolute;
			bottom:0;
			height: 25px;
			width: 100px;
			line-height: 25px;
			border-radius: 20px;
			font-size: 10px;
			color: #fff;
			background: #4a83ff;
			
			image{
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle ;
				margin-right: 5px;
			}
		}
		
	}
	.jifenContent{
		background: #fff;
		border-radius: 10px;
		height:950rpx;
		.testHeader{
			color: #3A3A3A;
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 1px;
			display: flex;
			justify-content: space-between;
			height: 50px;
			line-height: 50px;
			background: #e3e3e3;
			padding-left: 20px;
			padding-right: 20px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			box-shadow: inset 0 -10px 15px  0 #f1f1f1;
		}
		.activite{
			color: #1890FF;
		}
		.content{
			.jifenlist{
				display: flex;
				justify-content: space-between;
				height: 50px;
				line-height: 25px;
				border-bottom: 1px solid #ccc;
				padding: 10px;
				.Number{
					color: #1890FF;
					font-weight: bold;
					font-size: 20px;
					line-height: 50px;
				}
			}
			text{
				display: block;
			}
		}
	}
}
</style>
